<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AAAAAA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style type="text/css">
	.container-fluid {
	  padding: 10px;
	  }
	.box {
	  margin-bottom: 20px;
	  float: left;
	  width: 300px;
	  height: 300px;
	  background-color: #FF7F50;
	  border: solid 1px;
	  }
	  .box img {
	  	max-width: 100%
	}
</style>

</head>
<body>

	<div id="masonry" class="container-fluid box-main">
		<div class="box"><img src="http://jq22.com/images/1.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/2.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/3.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/4.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/5.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/1.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/2.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/3.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/4.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/5.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/1.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/2.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/3.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/4.jpg"></div>
		<div class="box"><img src="http://jq22.com/images/5.jpg"></div>
	</div>


	
<!-- jQuery -->
<script src="./jquery.min.js"></script>
<script src="./masonry.pkgd.min.js"></script>


<script type="text/javascript">
$(function() {    
	$('.box-main').masonry({
	  	// options
	  	itemSelector: '.box',	//块的选择器 
	  	columnWidth: 100,		//缩放的最小宽度
	  	gutter: 10,				//行间距
	  	gutterWidth : 10,		//列间距
//	  	isAnimated: true,		//使用jQuery的布局变化,默认true 
//		isFitWidth: true,		//自适应浏览器宽度Boolean 
//		isResizableL: true, 	//是否可调整大小 Boolean 
//		isRTL: true,			//使用从右到左的布局 Boolean
//		animationOptions: {
//			 queue: false, 
//			 duration: 500
//		},	// animate属性渐变效果(Object { queue: false, duration: 500 })
	});
});
</script>

</body>
</html>

